<template>
	<div class="nav" >
		
		<ul  ref="rq">
			 <li>
			 	<router-link to="/index" :class="{link_active:act}">首页</router-link>
			 </li>
			<li v-for="(item,index) in a" :key=index ><router-link :to="{name:'donghua',params:{tid:item.tid}}" :class="{link_active:item.tid==getCurTid}" >{{item.typename}}</router-link></li>
		</ul>

		
		<div class="xia" @click="tan">
			<i class="iconfont icon-xiangxiajiantou"></i>
		</div>
		<div class="xlk" :class="{act:kg}">
			<ul>
				<li>
			 		<router-link to="/index">首页</router-link>
			 	</li>
				<li v-for="(item,index) in a" :key='index' ><router-link :to="{name:'donghua',params:{tid:item.tid}}" >{{item.typename}}</router-link></li>
			</ul>
			<div >
				<i class="iconfont icon-shangjiantou" @click="tan"></i>
			</div>
		</div>
	</div>
</template>

<script>
	
	import BScroll from 'better-scroll'
    
    
	export default{
		created(){
    	this.a=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList[0]
 		console.log(this.a)
 		if(this.$route.params.tid){
					this.act=false
				}else{
					this.act=true
				}
    },
		data(){
			return {
				kg:false,
				a:[],
				act:true,

				
			}
		},
		mounted(){
			
		},
		computed:{
			getCurTid(){
				return this.$store.getters.getCurTid
			}
		},
		methods:{
			bian(x){
//				this.$refs.rq.style.transform="translateX("+(x-1)*(-73.55)+"px)"
			},
			
			tan(){
				this.kg?this.kg=false:this.kg=true

			},
		},
		watch:{
			$route(newValue){
				if(newValue.params.tid){
					this.act=false
				}else{
					this.act=true
				}
				console.log(newValue)
				
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		background: white;
		z-index: 5;
		position: fixed;
		top:45px;
		height: 40px;
		width: 100%;
		padding: 0 6px;
		.xlk{
			height: 0;
			overflow: hidden;
			background: white;
			z-index: 4;
			margin-left: -10px;
			position:absolute;
			transform: translateY(-18%);
			transition: all .5s;
			
			div{
				text-align: center;
				i{
					font-weight: bold;
				}
			}
			>ul{
				padding: 0 22px;
				width: 100%;
				li{
					text-align: center;
					width: 16.6%;
					height: 40px;
					display: inline-block;
					line-height: 40px;
					a{
						font-weight: bold;
						width: 15px;
					    font-size: 14px;
					    line-height: 40px;
					    text-align: center;
					    color: #aaa;
					    padding-bottom: 5px;
					    }
					    .router-link-active  {
			border-bottom: 2px solid #fb7299;	
			color: #fb7299;
	}
					
				}
				
				
			}
		}
		.act{
			/*transform: translateY(-40px);*/
			height: 500%;
		}
		.xia{
			background: white;
			z-index: 2;
			position: absolute;
			top: 0;
			right: 0;
			height: 40px;
			width: 50px;
			i{
				font-weight: bold;
				display: block;
				width: 16px;
				height: 16px;
				position: absolute;
				right: 0;
				bottom: 0;
				top: 0;
				left: 0;
				margin: auto;
				color: #aaa;
			}
		}
		>ul{
			overflow: scroll;
			padding: 0  22px;
			white-space: nowrap;
			height: 40px;
			&::-webkit-scrollbar {
			    display: none;
			}
			li{
				margin-right: 45px;
				height: 40px;
				display: inline-block;
				line-height: 40px;
				a{
					font-weight: bold;
					width: 15px;
				    font-size: 14px;
				    line-height: 40px;
				    text-align: center;
				    color: #aaa;
				    padding-bottom: 5px;
				    }
				
			}
			
		}
	}
	.nav li  .link_active{
			border-bottom: 2px solid #fb7299;	
			color: #fb7299;
	}
</style>